<template>
  <a-card title="常见配置" :bordered="false">
    <!--
      【即时保存大体思路】：
      1. JVxeTable 上必须加 keep-source 属性
      2. 监听 edit-closed事件，这个事件是在编辑完成后触发
      3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
    -->
    <j-vxe-table
      toolbar
      :toolbarConfig="toolbarConfig"

      row-number
      row-selection
      keep-source
      async-remove

      :height="340"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      @edit-closed="handleEditClosed"
      @pageChange="handlePageChange"
      @selectRowChange="handleSelectRowChange"/>
  </a-card>
</template>

<script>
import { getAction, postAction, putAction } from '@api/manage'
import { JVXETypes } from '@/components/jeecg/JVxeTable'

// 即时保存示例
export default {
  name: 'JSBCDemo',
  data() {
    return {
      // 工具栏的按钮配置
      toolbarConfig: {
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: []
      },
      // 是否正在加载
      loading: false,
      // 分页器参数
      pagination: {
        // 当前页码
        current: 1,
        // 每页的条数
        pageSize: 200,
        // 可切换的条数
        pageSizeOptions: ['10', '20', '30', '100', '200'],
        // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
        total: 0,
      },
      // 选择的行
      selectedRows: [],
      // 数据源，控制表格的数据
      dataSource: [],
      // 列配置，控制表格显示的列
      columns: [
        {key: 'mremark', title: '标题'},
        {key: 'mvalue', title: '值', type: JVXETypes.input},
      ],
      // 查询url地址
      url: {
        list: "/gongqiang/mallConfiguration/list",
        edit: "/gongqiang/mallConfiguration/edit",
      },
    }
  },
  created() {
    this.loadData()
  },
  methods: {

    // 加载数据
    loadData() {
      // 封装查询条件
      let formData = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      // 调用查询数据接口
      this.loading = true
      getAction(this.url.list, formData).then(res => {
        if (res.success) {
          // 后台查询回来的 total，数据总数量
          this.pagination.total = res.result.total
          // 将查询的数据赋值给 dataSource
          this.dataSource = res.result.records
          // 重置选择
          this.selectedRows = []
        } else {
          this.$error({title: '主表查询失败', content: res.message})
        }
      }).finally(() => {
        // 这里是无论成功或失败都会执行的方法，在这里关闭loading
        this.loading = false
      })
    },




    // 单元格编辑完成之后触发的事件
    handleEditClosed(event) {
      let {$table, row, column} = event

      let field = column.property
      let cellValue = row[field]
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, field)) {
        // 校验当前行
        $table.validate(row).then((errMap) => {
          // 校验通过
          if (!errMap) {
            // 【模拟保存】
            let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
            console.log('即时保存数据：', row)
            putAction(this.url.edit, row).then(res => {
              if (res.success) {
                this.$message.success(`"${column.title}"保存成功！`)
                // 局部更新单元格为已保存状态
                $table.reloadRow(row, null, field)
              } else {
                this.$message.warn(`"${column.title}"保存失败：` + res.message)
              }
            }).finally(() => {
              hideLoading()
            })
          }
        })
      }
    },

    // 当分页参数变化时触发的事件
    handlePageChange(event) {
      // 重新赋值
      this.pagination.current = event.current
      this.pagination.pageSize = event.pageSize
      // 查询数据
      this.loadData()
    },

    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      this.selectedRows = event.selectedRows
    },

  },
}
</script>

<style scoped>

</style>